<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PC聊天</title>
    <script src="js/jquery-3.5.0.js"></script>
    <link rel="stylesheet" href="css/education.css">
    <script src="js/Vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="all">
    <br>
    <div class="main">
        <div class="top">
            <div class="top-left">
                <div class="header" style="background-image:url('img/2.png');"></div>
                <div class="search">
                    <input type="text">
                    <i class="icon-sear"></i>
                </div>
            </div>
            <div class="top-type">
                <a href="#" class="news icon-site"></a>
                <a href="#" class="friend icon-site"></a>
                <a href="#" class="file icon-site"></a>
            </div>
            <div class="top-right">
                <i class="ic-same"></i>
                <i class="ic-same"></i>
                <i class="ic-menu ic-same"></i>
                <i class="ic-return ic-same"></i>
                <i class="ic-home ic-same"></i>
            </div>
        </div>
        <div class="box">
            <div class="chat-list">
                <div v-for="(interlocutor,index) in interlocutors" @click="getQuestions(index)" class="list-box"
                     :style="index==interlocutor_choose?' background-color: #dbdbdb;':''">
                    <div :style="interlocutor.newMsg==0 ? '':'visibility: hidden'"><img class="new"
                                                                                        src="img/new.png">
                    </div>
                    <img class="chat-head" :src="interlocutor.imagehead" alt="">
                    <div class="chat-rig">
                        <p class="title">{{interlocutor.name}}老师</p>
                        <p class="text">{{interlocutor.latestDetail}}</p>
                    </div>
                </div>
            </div>
            <div class="chat-list">

                <div class="list-box" v-for="(question,index) in questions" @click="detail(index)"
                     :style="index==question_choose?' background-color: #dbdbdb;':''">

                    <div :style="question.newMsg==0 ? '':'visibility: hidden'"><img class="new"
                                                                                    src="img/new.png"></div>
                    <div class="chat-rig2">
                        <p class="title2">{{question.title}}</p>
                        <p class="text2">{{question.latestDetail}}</p>
                    </div>
                </div>

            </div>
            <div class="box-right">
                <div class="recvfrom">
                    <div class="nav-top">
                        <p v-if="yourInterlocutor!=''">{{yourInterlocutor.name}}老师</p>
                    </div>
                    <div class="news-top">
                        <ul id="msgbox">
                            <li v-for="detail in currentQuestion.details" :class="detail.isQuestion==0?'other':'self'">

                                <p style="text-align: center" v-if="detail.status==3">----------以上为离线消息点击<a href="#"
                                                                                                            @click="refresh()"
                                                                                                            style="color: #2D93CA">刷新</a>----------
                                </p>
                                <div class="avatar" v-if="detail.status!=3"><img
                                        :src="detail.isQuestion==1?you.imagehead:yourInterlocutor.imagehead" alt="">
                                </div>
                                <div class="msg">
                                    <p class="msg-name" v-if="detail.isQuestion==1">{{you.name}}</p>
                                    <p class="msg-name" v-if="detail.isQuestion==0">{{yourInterlocutor.name}}老师</p>
                                    <!--                                <img src="img/1.png" class="expression" alt="">-->
                                    <p class="msg-text" v-if="detail.content!=null" v-html="detail.content"></p>
                                    <p class='msg-text' v-if="detail.image!=null"><img :src="detail.image"
                                                                                       class='msg-img'></p>

                                </div>
                                <div class="clear" style="clear: both;margin: 0px"></div>
                                <p class="time">{{detail.time}}</p>
                            </li>
                        </ul>

                    </div>
                </div>
                <div class="expressions">
                    <ul>
                        <li class="choose"><img class="expresion-img" src="expression/啊.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/三条线.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/不舒服.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/什么.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/企鹅.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/便便.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/冷.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/冷酷.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/凶.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/又死了.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/发呆.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/受伤.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/吓死.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/呕吐.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/呲牙.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/呼气.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/哼.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/坏笑.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/大惊.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/大笑.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/大闹.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/天使.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/奋斗.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/好吃.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/尴尬.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/幽灵.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/开心.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/心碎.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/忍者.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/怪物.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/恩_.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/恶魔.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/惊恐.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/惊悚.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/惊讶.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/感冒.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/愤怒.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/懵逼.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/斜眼.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/无聊.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/星星眼.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/晕.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/死了.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/汗颜.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/流口水.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/流汗.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/流泪.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/流鼻血.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/炸弹.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/点赞.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression//爱你.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/犯困.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/猪头.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/献吻.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/生气.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/疑问.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/白眼.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/睡着.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/睡醒.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/瞌睡.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/笑出泪.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/笑掉大牙.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/笑脸.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/衰.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/讨厌.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/调皮.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/贪吃.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/酷.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/闭嘴.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/难过.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/面无表情.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/飞吻.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/饿死.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/骂人.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/骷髅.png"></span></li>
                        <li class="choose"><img class="expresion-img" src="expression/鼻涕.png"></span></li>

                    </ul>
                </div>
                <div class="sendto">
                    <div class="but-nav">
                        <ul>
                            <li class="emoji" id="emoji"></li>
                            <input type="file" onchange="selectImg(this)" accept="image/jpg,image/jpeg,image/png"
                                   name="file" id="inputImage" style="display: none;">
                            <li class="photo">
                                <label for="inputImage"><img src="img/img.png" style="width: 22px;height: 22px;"
                                                             alt="发送图片"></label>
                            </li>
                            <li class="cut"></li>
                            <li class="page"></li>
                            <li class="old"></li>
                        </ul>
                    </div>
                    <div class="but-text">
                        <textarea name="" id="text" cols="110" rows="6" v-model="currentQuestion.preSend"
                                  autofocus></textarea>
                        <!--                    @keyup.enter="sendMsg()"-->
                        <a href="#" class="button" @click="sendMsg()">发送</a>
                    </div>
                </div>
            </div>

        </div>

        <br>
    </div>
</div>
<script>

    //jQuery部分
    function transform(details) {//表情编译
        var front = "";
        var back = "";
        var str1 = [];
        var str2 = [];
        var expression = "";
        var newExpression = "";
        var newContent = "";
        // console.log(details);
        for (var i = 0; i < details.length; i++) {
            if (details[i].content != null && details[i].content.search("]") != -1) {

                back = details[i].content;
                do {
                    //截取]前
                    str1 = back.split("]");
                    front = str1[0];
                    //front再切出表情文字
                    str2 = front.split("[");
                    expression = str2[str2.length - 1];
                    newExpression = "<img class='expresion-text' src='expression/" + expression + ".png'/>";
                    // console.log(expression);
                    expression = "[" + str2[str2.length - 1] + "]";
                    newContent = details[i].content.replace(expression, newExpression);
                    //back迭代，用于循环
                    back = back.split("]")[str1.length - 1];
                } while (back.search("]") != -1)
                details[i].content = newContent;
            }
        }
        return details;
    };
    var currentTime = "";

    function getTime() {//获取当前时间
        var date = new Date();
        this.year = date.getFullYear();
        this.month = date.getMonth() + 1;
        this.date = date.getDate();
        // this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
        this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        currentTime = this.year + "-" + this.month + "-" + this.date + " "
            + this.hour + ":" + this.minute + ":" + this.second;
        // console.log(currentTime)
    };

    function selectImg(pic) {//选中图片上传至服务器
        if (!pic.files || !pic.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var images = evt.target.result;

            getTime();
            app.createImage(images);

        };
        reader.readAsDataURL(pic.files[0]);

    };

    var url = "ws://192.168.12.43:8081/WebSocketController/";
    var ws = null;
    $(document).ready(function () {

        //表情实现点击生成到对话框
        $(".news-top").scrollTop($(".news-top")[0].scrollHeight);
        $("#emoji").click(function () {
            $(".expressions").toggle();
        });
        $(document).click(function () {
            $(".expressions").css("display", "none");
        });

        $(".expressions").mouseleave(function () {
            $(".expressions").css("display", "none");
        });

        $("#emoji").click(function (event) {
            event.stopPropagation();//阻止事件
        });
        $(".expresion-img").click(function (e) {
            var content = app.currentQuestion.preSend;
            if (content == null) {
                content = "";
            }
            var expression = e.target.src + "";
            expression = expression.split("expression/")[1].split(".png")[0];
            expression = decodeURIComponent(expression);
            expression = "[" + expression + "]";
            app.currentQuestion.preSend = content + expression;
            // $("#text").val(content+expression);
        });
        $("#0choose").css("background-color", "#dbdbdb");
        $("#text").keyup(function (e) {//实现ctrl+enter换行，enter发送

            if (e.keyCode == 13 && e.ctrlKey) {
                app.currentQuestion.preSend += "\n"; //换行
            } else if (e.keyCode == 13) {
                app.sendMsg(); //提交的执行函数
                e.preventDefault();//禁止回车的默认换行

            }
        });

    });


    var app = new Vue({
        el: "#all",
        data: {
            questions: [],
            currentQuestion: "",
            interlocutors: [],
            yourInterlocutor: "",
            you: "",
            interlocutor_choose: 0,
            question_choose: 0,
            // msg:""

        },
        mounted() {
            //获取当前用户还未实现

            //获取对话者信息
            axios.get("/question/getInterlocutors").then(res => {

                this.interlocutors = res.data.data;
                // console.log(this.interlocutors);
                if (res.data.data == null || res.data.data.length == 0) {//老师为空
                    var noInterlocutor = {};
                    noInterlocutor.name = "您没有任何";
                    this.interlocutors.push(noInterlocutor);
                    return;
                }
                this.yourInterlocutor = res.data.data[0];
                this.questions = this.yourInterlocutor.questionAnswers;//问题为空
                if (this.questions == null || this.questions.length == 0) {
                    var noQuestion = {};
                    noQuestion.title = "没有问题";
                    this.questions.push(noQuestion);
                    return;
                }
                this.currentQuestion = this.questions[0];//当前问题
                this.latestMsg();


                // console.log(this.interlocutors);
                //获取对话信息
                // axios.get("/question/getQuestions/"+this.interlocutors[0].tcId).then(res=>{
                //     this.questions=res.data.data;
                //     if(res.data.data==null||res.data.data.length==0){
                //         var noQuestion={};
                //         noQuestion.title="没有问题";
                //         this.questions.push(noQuestion);
                //         return;
                //     }
                //     this.currentQuestion=res.data.data[0];
                this.currentQuestion.preSend = "";
                var details = transform(this.currentQuestion.details);
                this.currentQuestion.details = details;
                //离线消息分界线
                var line = {};
                line.status = 3;
                for (var i = 0; i < this.questions.length; i++) {
                    this.questions[i].details.push(line);
                }

                // <p style="text-align: center">----------以上为离线消息点击<a href="#" style="color: #2D93CA">刷新</a>----------</p>

                // console.log(this.questions);

                //webscket

                var idFrom = app.you.stuid;
                url = url + idFrom;
                ws = new WebSocket(url);
                ws.onopen = function () {
                    console.info("连接成功");
                }
                ws.onmessage = function (message) {//接收到消息后增加到当前框内
                    var msgList = message.split(">>>>");
                    var msgType = msgList[0];
                    var idFrom = msgList[1];
                    var qaid = msgList[2];
                    var newMsg = "";
                    for (var i = 3; i < msgList.length; i++) {
                        newMsg += msgList[i];
                    }//假设当前用户是学生
                    if (msgType == 1) {//1代表图片消息
                        app.sendImage(newMsg);
                    } else if (msgType == 2) {//2代表视频消息
                        // app.sendVideo(newMsg);
                    } else if (msgType == 3) {//3代表结束当前消息

                    } else if (msgType == 0) {//0代表普通消息
                        newMsg = newMsg.replace(/\n/g, '<br/>');
                        getTime();
                        var newDetail = {};
                        newDetail.content = newMsg;

                        newDetail.image = null;
                        newDetail.isQuestion = 1;
                        newDetail.qaid = qaid;
                        newDetail.status = null;//后续改进使用：如撤回删除校验是否发送成功等等
                        newDetail.time = currentTime;
                        newDetail.video = null;
                        //解析表情
                        var details = [newDetail];
                        var newDetails = transform(details);
                        for (var i = 0; i < this.interlocutors.length; i++) {
                            if (this.interlocutors[i].stuid == idFrom) {
                                this.interlocutors[i].latestDetail = newDetails[0].content;//替换老师下面的最新消息
                                this.interlocutors[i].newMsg = 1;//消息提示
                                for (var j = 0; j < this.interlocutors[i].questionAnswers[j].length; j++) {
                                    this.interlocutors[i].questionAnswers[j].latestDetail = newDetails[0].content;//替换问题下面的最新消息
                                    this.interlocutors[i].questionAnswers[j].newMsg = 1;//消息提示
                                    if (this.interlocutors[i].questionAnswers[j].qaid == qaid) {
                                        this.interlocutors[i].questionAnswers[j].details.push(newDetails[0]);//插入消息
                                    }
                                }
                            }

                        }


                        $(document).ready(function () {
                            $(".news-top").scrollTop($(".news-top")[0].scrollHeight);
                            $("#text").focus();
                        });
                    }

                }
                ws.onclose = function () {
                    console.info("连接断开");

                }
            }),
                $(document).ready(function () {
                    $(".news-top").scrollTop($(".news-top")[0].scrollHeight);
                    $("#text").focus();

                });
            // })


        },
        methods: {
            //创建普通消息
            createMsg: function (messageData) {
                messageData = messageData.replace(/\n/g, '<br/>');
                getTime();
                var newDetail = {};
                newDetail.content = messageData;

                newDetail.image = null;
                newDetail.isQuestion = 1;
                newDetail.qaid = this.currentQuestion.qaid;
                newDetail.status = null;//后续改进使用：如撤回删除校验是否发送成功等等
                newDetail.time = currentTime;
                newDetail.video = null;
                //解析表情
                var details = [newDetail];
                var newDetails = transform(details);
                this.currentQuestion.details.push(newDetails[0]);
                // this.msg
                this.currentQuestion.preSend = "";
                $(document).ready(function () {
                    $(".news-top").scrollTop($(".news-top")[0].scrollHeight);
                    $("#text").focus();
                });

            },
            //创建图片消息
            createImage: function (images) {
                if (this.currentQuestion.details == null || this.currentQuestion.length == 0) {
                    return;
                }
                getTime();
                var newDetail = {};
                newDetail.content = null;
                newDetail.image = images;
                newDetail.isQuestion = 1;
                newDetail.qaid = this.currentQuestion.qaid;
                newDetail.status = null;
                newDetail.time = currentTime;
                newDetail.video = null;
                this.currentQuestion.details.push(newDetail);
                $(document).ready(function () {
                    $(".news-top").scrollTop($(".news-top")[0].scrollHeight);
                    $("#text").focus();
                });

            },
            //发送消息
            sendMsg: function () {
                var messageData = this.currentQuestion.preSend;
                var text = this.currentQuestion.preSend.trim();
                if (text == null || text == "") {
                    this.currentQuestion.preSend = "";
                    return;
                }
                this.createMsg(messageData);
                messageData = "0" + "<<<<" + this.currentQuestion.teaid + "<<<<" + this.currentQuestion.qaid + "<<<<";
                ws.send(messageData);
                // let newDetail = {};
                var detail={};
                detail.qaid=this.currentQuestion.qaid;
                detail.isQuestion=1;
                detail.content=messageData;
                detail.image = null;
                getTime();
                detail.time = currentTime;
                detail.video = null;

                axios.post("/test/testRequest",detail ).then(res => {
                    if (res.data.code === 400) {
                        layer.msg("离线消息发送失败")

                    }
                })
            },

            // $("#quit").click(function () {
            //     //断开连接
            //     if (ws != null) {
            //         ws.close();
            //     }
            //
            // });


            //点击切换对话
            detail: function (index) {
                this.currentQuestion = "";
                this.currentQuestion = this.questions[index];
                this.questions[index].newMsg = 0;
                if (this.currentQuestion.details == null || this.currentQuestion.details.length == 0) {
                    return;
                }
                // alert(index);
                var details = transform(this.currentQuestion.details);
                // //离线消息分界线
                // var line={};
                // line.status=3;
                // this.currentQuestion.details.push(line);
                this.currentQuestion.details = details;
                this.question_choose = index;
                $(document).ready(function () {
                    $(".news-top").scrollTop($(".news-top")[0].scrollHeight);
                    $("#text").focus();
                });
            }
            ,
            getQuestions: function (index) {//点击切换不同老师的问题
                // console.log(index);
                this.yourInterlocutor = this.interlocutors[index];
                this.interlocutors[index].newMsg = 0;
                this.questions = this.yourInterlocutor.questionAnswers;
                this.interlocutor_choose = index;
                if (this.questions == null || this.questions.length == 0) {

                    var noQuestion = {};
                    noQuestion.title = "无问题,待新建";
                    this.questions.push(noQuestion);
                    this.currentQuestion = "";
                    return;
                } else if (this.questions[0].title == "无问题,待新建") {
                    this.currentQuestion = "";
                    return;
                }
                this.currentQuestion = this.questions[0];
                // axios.get("/question/getQuestions/"+this.interlocutors[index].tcId).then(res=>{
                //     this.questions=res.data.data;
                //     this.interlocutor_choose=index;
                //     if(res.data.data==null||res.data.data.length==0){
                //         var noQuestion={};
                //         noQuestion.title="无问题,待新建";
                //         this.questions.push(noQuestion);
                //         this.currentQuestion="";
                //         return;
                //     }

                // this.currentQuestion=res.data.data[0];
                var details = transform(this.currentQuestion.details);
                this.currentQuestion.details = details;
                this.question_choose = 0;
                //离线消息分界线
                // var line={};
                // line.status=3;
                // for (var i=0; i< this.questions.length;i++){
                //     this.questions[i].details.push(line);
                // }

                // <p style="text-align: center">----------以上为离线消息点击<a href="#" style="color: #2D93CA">刷新</a>----------</p>

                // console.log(this.questions);

                // })
                $(document).ready(function () {
                    $(".news-top").scrollTop($(".news-top")[0].scrollHeight);
                    $("#text").focus();
                });

            }
            ,
            refresh: function () {//刷新离线消息
                axios.get("/question/getDetails/" + this.currentQuestion.qaid).then(res => {
                    var details = transform(res.data.data);
                    this.currentQuestion.details = details;
                }),
                    $(document).ready(function () {
                        $(".news-top").scrollTop($(".news-top")[0].scrollHeight);
                        $("#text").focus();
                    });
            }
            ,

            latestMsg: function () {//更新最近的消息
                var latestDetails = [];
                var latestContent = [];
                for (var i = 0; i < this.interlocutors.length; i++) {
                    if (this.interlocutors[i].questionAnswers.length == 0 || this.interlocutors[i].questionAnswers[0].details.length == 0) {
                        continue;
                    }
                    for (var j = 0; j < this.interlocutors[i].questionAnswers.length; j++) {
                        console.log(this.interlocutors[i].questionAnswers[j].details);
                        latestDetails = this.interlocutors[i].questionAnswers[j].details;
                        if (latestDetails.length == 0 || latestDetails == null) {
                            continue;
                        }
                        if (latestDetails[latestDetails.length - 1].isQuestion != 0) {
                            this.interlocutors[i].questionAnswers[j].latestDetail = "[暂未回复您的消息]";
                            continue;
                        }
                        if (latestDetails[latestDetails.length - 1].image != null) {
                            this.interlocutors[i].questionAnswers[j].latestDetail = "[图片消息]";
                        } else if (latestDetails[latestDetails.length - 1].video != null) {
                            this.interlocutors[i].questionAnswers[j].latestDetail = "[视频消息]";
                        }
                        latestContent = latestDetails[latestDetails.length - 1].content;
                        if (latestContent == "" || latestContent == null) {
                            continue;
                        }
                        this.interlocutors[i].questionAnswers[j].latestDetail = latestContent;
                    }


                    latestDetails = this.interlocutors[i].questionAnswers[this.interlocutor_choose].details;
                    if (latestDetails.length == 0 || latestDetails == null) {
                        continue;
                    }
                    if (latestDetails[latestDetails.length - 1].isQuestion != 0) {
                        this.interlocutors[i].latestDetail = "[暂未回复您的消息]";
                        continue;
                    }
                    if (latestDetails[latestDetails.length - 1].image != null) {
                        this.interlocutors[i].latestDetail = "[图片消息]";
                    } else if (latestDetails[latestDetails.length - 1].video != null) {
                        this.interlocutors[i].latestDetail = "[视频消息]";
                    }
                    latestContent = latestDetails[latestDetails.length - 1].content;
                    if (latestContent == "" || latestContent == null) {
                        continue;
                    }
                    this.interlocutors[i].latestDetail = latestContent;


                }
            },

        }

    });


</script>
</body>

</html>